<template>
  <ArtSearchBar
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    :rules="rules"
    @reset="handleReset"
    @search="handleSearch"
  >
  </ArtSearchBar>
</template>

<script setup lang="ts">
  interface Props {
    modelValue: Record<string, any>
  }

  interface Emits {
    (e: 'update:modelValue', value: Record<string, any>): void
    (e: 'search', params: Record<string, any>): void
    (e: 'reset'): void
  }

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  const searchBarRef = ref()

  /**
   * 表单数据双向绑定
   */
  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  /**
   * 表单校验规则
   */
  const rules = {}

  /**
   * 角色状态选项
   */
  // const statusOptions = ref([
  //   { label: '是', value: 1 },
  //   { label: '否', value: 0 }
  // ])
  // const statusOptions1 = ref([
  //   { label: '热更新', value: 1 },
  //   { label: '整包更新', value: 0 }
  // ])
  // const statusOptions2 = ref([
  //   { label: '发行', value: 1 },
  //   { label: '不发行', value: 0 }
  // ])
  // const statusOptions3 = ref([
  //   { label: '是', value: 1 },
  //   { label: '否', value: 0 }
  // ])

  /**
   * 搜索表单配置项
   */
  const formItems = computed(() => [
    {
      label: '搜索',
      key: 'search',
      type: 'input',
      placeholder: '请输入搜索内容',
      clearable: true
    }
    // {
    //   label: '强制更新',
    //   key: 'edition_force',
    //   type: 'select',
    //   props: {
    //     placeholder: '请选择状态',
    //     options: statusOptions.value,
    //     clearable: true
    //   }
    // },
    // {
    //   label: '更新方式',
    //   key: 'package_type',
    //   type: 'select',
    //   props: {
    //     placeholder: '请选择状态',
    //     options: statusOptions1.value,
    //     clearable: true
    //   }
    // },
    // {
    //   label: '是否发行',
    //   key: 'edition_issue',
    //   type: 'select',
    //   props: {
    //     placeholder: '请选择状态',
    //     options: statusOptions2.value,
    //     clearable: true
    //   }
    // },
    // {
    //   label: '静默更新',
    //   key: 'edition_silence',
    //   type: 'select',
    //   props: {
    //     placeholder: '请选择状态',
    //     options: statusOptions3.value,
    //     clearable: true
    //   }
    // },
    // {
    //   label: '创建日期',
    //   key: 'daterange',
    //   type: 'datetime',
    //   props: {
    //     style: { width: '100%' },
    //     placeholder: '请选择日期范围',
    //     type: 'daterange',
    //     rangeSeparator: '至',
    //     startPlaceholder: '开始日期',
    //     endPlaceholder: '结束日期',
    //     valueFormat: 'YYYY-MM-DD',
    //     shortcuts: [
    //       { text: '今日', value: [new Date(), new Date()] },
    //       { text: '最近一周', value: [new Date(Date.now() - 604800000), new Date()] },
    //       { text: '最近一个月', value: [new Date(Date.now() - 2592000000), new Date()] }
    //     ]
    //   }
    // }
  ])

  /**
   * 处理重置事件
   */
  const handleReset = () => {
    console.log('搜索参数', formData.value)
    emit('reset')
  }

  /**
   * 处理搜索事件
   * 验证表单后触发搜索
   */
  const handleSearch = async () => {
    // console.log('搜索参数s', formData.value)
    await searchBarRef.value.validate()
    emit('search', formData.value)
  }
</script>
